<#include "/common/_layout.html">
<#assign pageJavascript>
<script type="text/javascript" src="/assets/mqtt/mqttws31.js"></script>
<script type="text/javascript">

var client;
// 连接成功
function onConnect() {
	layer.msg("连接成功!");
    var subtopic = 'out/'+$("#devicecid").val();
    client.publish = function(topic, commond) {
        message = new Paho.MQTT.Message(commond);
        message.destinationName = topic;
        client.send(message);
    }
    client.subscribe(subtopic, {qos: 0});
}
// 连接丢失
function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0){
		layer.msg("连接丢失!");
	};
}
// 消息到达    
function onMessageArrived(message) {
	$("#revicemsg").html(message.payloadString);
}
var connect = function(){
	$.post("/admin/device/test/connectuser",{cid:$("#clientid").val()},function(data){
		client = new Paho.MQTT.Client("${mqttserver!}", 1881, $("#clientid").val());
		client.onConnectionLost = onConnectionLost;
		client.onMessageArrived = onMessageArrived;
	    client.connect({onSuccess:onConnect,
			   userName:$("#clientid").val().substr(5), 
			   password:data.msg});
		});
};
var publish = function(){
    var topic = 'in/'+$("#devicecid").val();
    if(client!=null){
        client.publish(topic, $("#sendmsg").val());
        layer.msg("发送成功！");
    }
};
var disconnect = function(){
    if(client!=null){
        client.disconnect();
        layer.msg("连接断开!");
    }
};
</script>
</#assign>
<@layout pageTitle="用户测试" pageJavascript=pageJavascript pageCss=pageCss>	
<h3 class="page-header">用户测试</h3>	
<form id = "form1" class="form-horizontal">
  <div class="form-group">
    <label for="devicecid" class="col-sm-2 control-label">设备ID</label>
    <div class="col-xs-10 col-sm-5">
      <input type="text" id="devicecid" value="3db0c3b437056ade/ewewewee323232e" placeholder="请输入clientid" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="clientid" class="col-sm-2 control-label">用户ID</label>
    <div class="col-xs-10 col-sm-5">
      <input type="text" id="clientid" value="user/fdasfasdsdf" placeholder="请输入clientid" class="form-control">
    </div>
  </div>
<!--   <div class="form-group">
    <label for="usertoken" class="col-sm-2 control-label">usertoken</label>
    <div class="col-xs-10 col-sm-5">
      <input type="text" id="usertoken" value="" placeholder="请输入usertoken" class="form-control">
    </div>
  </div> -->
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" onclick="connect();" class="btn btn-success">连接订阅</button>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">发送消息</label>
    <div class="col-xs-10 col-sm-5">
    	<textarea id="sendmsg" rows="5" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">收到消息</label>
    <div class="col-xs-10 col-sm-5" id="revicemsg">
    	
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" onclick="publish();" class="btn btn-info">发布</button>
      <button type="button" onclick="disconnect();" class="btn btn-danger">断开</button>
    </div>
  </div>
</form>
</@layout>